<template>
  <view class="index">
    <text>{{ sex | dictLabel('sex') }}</text>
    <van-row
      :gutter="10"
      style="width: 100%"
    >
      <van-col :span="6">
        10
      </van-col>
      <van-col :span="6">
        10
      </van-col>
      <van-col :span="6">
        10
      </van-col>
      <van-col :span="6">
        10
      </van-col>
    </van-row>
    <van-button
      type="danger"
      @click="click"
    >
      11111112
    </van-button>
    <van-image
      width="10rem"
      height="10rem"
      fit="contain"
      src="https://img.yzcdn.cn/vant/cat.jpeg"
    />
    <van-dialog
      :use-slot="true"
      :async-close="true"
      :show="show"
      :show-cancel-button="true"
    >
      <van-field
        :value="username"
        label="用户名"
        placeholder="请输入用户名"
      />
      <van-field
        :value="password"
        type="password"
        label="密码"
        :border="false"
        placeholder="请输入密码"
      />
    </van-dialog>
    {{currentDate | parseTime}}
    <van-datetime-picker
      :value="currentDate"
      type="datetime"
      :min-date="minDate"
      :max-date="maxDate"
    />
    {{ motto }}
    <van-field
      :value="motto"
      label="输入框"
      @change="change"
    />
    <van-toast id="van-toast" />
    <van-notify id="van-notify" />
  </view>
</template>

<script>
import Toast from '@vant/weapp/dist/toast/toast'
import Notify from '@vant/weapp/dist/notify/notify'
import './index.less'

export default {
  data () {
    return {
      sex: '1',
      msg: 'Hello world!',
      checked: true,
      show: false,
      minDate: new Date(2020, 0, 1).getTime(),
      maxDate: new Date(2025, 10, 1).getTime(),
      currentDate: new Date().getTime(),
      motto: 'Hello miniprograme',
      username: undefined,
      password: undefined,
      userInfo: {
        nickName: 'mpvue',
        avatarUrl: 'http://mpvue.com/assets/logo.png'
      }

    }
  },
  methods: {
    click () {
      // this.show = true
      Toast('this.show')
      Notify('this.show')
      // console.log('show', this.show)
      // this.$Router.push({path: 'pages/test/index', query:{id: 123}})
    },
    change (event) {
      console.log('event', event)
      this.motto = event.detail
    }
  }
}
</script>
